<template>
  <view class="loginContainer">
    <!-- <image src="" mode="aspectFit" /> -->
    <view class="logo">LOGO</view>
    <view class="title">手机号登录</view>
    <form class="inputContainer">
      <view class="div-tel">
        <view class="areaCode">+86</view>
        <uni-easyinput
          class="input-tel"
          v-model="editData.tel"
          type="number"
          placeholder="请输入手机号"
          :inputBorder="false"
        />
      </view>
      <view class="verificationCode">
        <uni-easyinput
          v-model="editData.code"
          type="number"
          class="input-code"
          placeholder="请输入验证码"
          :inputBorder="false"
        />

        <view class="getCode">
          <u-toast ref="uToast"></u-toast>
          <u-verification-code
            :seconds="seconds"
            ref="uCode"
            @change="codeChange"
          ></u-verification-code>
          <u-button @tap="getCode" class="codeBtn">{{ tips }}</u-button>
        </view>
      </view>

      <uni-data-checkbox
        v-model="confirm"
        :localdata="confirmRange"
        @change="handleConfirmState"
        multiple
        selectedColor="#88031E"
        selectedTextColor="#88031E"
      >
      </uni-data-checkbox>
    </form>

    <view class="loginBtn">
      <button :loading="loading" @click="login" formType="submit" class="btn">
        登录
      </button>
    </view>

    <u-modal
      v-model="show"
      :title-style="{ color: 'red' }"
      @confirm="modalConfirm"
      :async-close="true"
      :show-title="false"
    >
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>
    <u-top-tips ref="errphoneNum"></u-top-tips>
    <u-top-tips ref="nonephoneNum"></u-top-tips>
    <u-top-tips ref="errCode"></u-top-tips>
    <u-top-tips ref="agree"></u-top-tips>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 临时字段，出接口文档以后改
      editData: {
        tel: undefined,
        code: undefined,
      },

      tips: "",
      seconds: 60,
      show: false,
      content: `
					<strong>鲸言创益无障碍智能科技研发中心</strong><br>
          <strong>用户协议1.0.0</strong><br>
					在使用本产品之前，<br>请再次仔细阅读以下协议。<br>
          (此处省略若干字......)<br>
				`,
      confirm: [0],
      isConfirm: false,
      confirmRange: [
        {
          value: 1,
          text: "我已阅读并同意《用户协议》",
        },
      ],
    };
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      // 先校验电话号码
      let phoneReg = /^1[3456789]\d{9}$/;
      if (!phoneReg.test(this.editData.tel)) {
        this.$refs.errphoneNum.show({
          title: "手机号格式不正确哦",
          type: "error",
        });
      } else {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: "正在获取验证码",
          });
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            this.$u.toast("验证码已发送");
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }, 2000);
        } else {
          this.$u.toast("请等倒计时结束后再发送");
        }
      }
    },

    login() {
      if (this.editData.tel === undefined || this.editData.tel === null) {
        this.loading = false;
        this.$refs.nonephoneNum.show({
          title: "请输入手机号哦",
        });
      } else {
        // 4位 因为会自动调用数字键盘，所以校验位数必要性在于验空。
        let codeReg = /^\d{4}$/;
        if (!codeReg.test(this.editData.code)) {
          this.loading = false;
          this.$refs.errCode.show({
            title: "请检查验证码哦",
          });
          // 还需校验验证码数值
        } else if (this.isConfirm === false) {
          this.loading = false;
          this.$refs.agree.show({
            title: "请确认用户协议哦",
          });
        } else {
          this.loading = true;
          setTimeout(() => {
            // 首次 将用户协议设置为强提醒
            this.show = true;
            // 第二次
            // uni.reLaunch({
            //   url: "../index/index",
            // });
          }, 500);
        }
      }
    },
    showAgreement() {
      this.show = true;
    },
    modalConfirm() {
      setTimeout(() => {
        this.show = false;
        uni.reLaunch({
          url: "../selectCharacter/selectCharacter",
        });
      }, 1500);
    },

    handleConfirmState() {
      this.isConfirm = !this.isConfirm;
    },
  },
};
</script>

<style lang="less" scoped>
.loginContainer {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    width: 80vw;
    text-align: left;
    font-size: 44rpx;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .logo {
    will-change: transform;
    width: 100vw;
    height: 25vh;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60rpx;
    background-color: rgba(136, 3, 30, 1);
    margin-bottom: 100rpx;
    font-weight: bold;
    letter-spacing: 2rpx;
  }
  .inputContainer {
    margin-top: 10%;
    width: 80vw;
    display: flex;
    flex-flow: column wrap;
    margin-bottom: 10%;
    .div-tel {
      display: flex;
      margin-bottom: 5%;
      border-bottom: solid 1px rgba(189, 195, 199, 0.4);
      .areaCode {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: rgba(189, 195, 199, 1);
        font-weight: bold;
        font-size: 36rpx;
      }
      .input-tel {
        flex: 5;
      }
    }

    .verificationCode {
      display: flex;
      margin-bottom: 20rpx;
      border-bottom: solid 1px rgba(189, 195, 199, 0.4);
      align-items: center;
      .input-code {
        flex: 2;
      }
      .getCode {
        flex: 1;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10rpx;
        .codeBtn {
          color: rgba(136, 3, 30, 0.8);
          width: 90%;
          height: 100%;
        }
      }
    }
  }
  .loginBtn {
    width: 80vw;
    .btn {
      background-color: rgba(136, 3, 30, 1);
      color: white;
      font-size: 36rpx;
    }
  }
  .slot-content {
    padding: 2%;
    text-align: center;
    font-size: 30rpx;
    color: #333;
    padding-left: 30rpx;
  }
}
</style>
